<template>

  <div id="app">

      <main>
          <router-view></router-view>
      </main>

      <footer >

        <div class="box_container">

          <router-link v-for="list in lists" :to="{path: '/' + list.id,query:list.queryObj}" :key="list.id" tag="span" class = "box_item_list" > 
            <div class="box_item">
              <img src="../../assets/logo.png" align="center"/>
              <p>{{list.title}}</p>
            </div>
          </router-link>   

        </div>
       
      </footer>
    

  </div>

</template>

<script type="text/ecmascript-6">
import naviBar from '../../common/NavigationBar'
export default {
  name: 'Home',
  computed:{

  },
  data:function(){
    return {
      lists:[
        {id:'',title:'Home',queryObj:{}},
        {id:'testpage',title:'Test',queryObj:{user:'du12'}}
      ]
    }
  },
  created :function(){

    //测试store 存储数据
    var temp = ['test','created']
    this.$store.dispatch('asycAddData',temp)
    //测试时间监听  
    // this.$on('test',function(msg){
    //     alert(msg);
    // });
    
    // setTimeout(() =>{
    //   触发事件
    //   this.$emit('test','msg:success');
    // },2000)

    //alert(JSON.stringify(this.someObject))
    //为对象添加单个属性
    var unwatch = this.$watch('someObject',function(newValue,oldValue){
      console.info("watch change:"+ JSON.stringify(newValue));
      if(unwatch){
        //是否取消监听
        //unwatch();
      }
    },
    {
      deep:true  //对象内部值的变化
    });
    // this.$set(this.someObject,"name",'duningwei');
    //alert('单个属性添加：set方法 ' + JSON.stringify(this.someObject))
    //this.someObject.name = "dnw";
    
    //为对象添加多个属性
    this.someObject = Object.assign({},this.someObject,{a:1,b:3})
    console.info('多个对象添加：'+JSON.stringify(this.someObject))
    // 修改数据之后立即使用这个方法，获取更新后的 DOM。
    this.$nextTick(() => {
        this.transitionName = 'success';
        console.info('next: ' + this.transitionName);
    });
        
  },
  mounted:function(){
      
  },
  watch:{
      '$route':function(to,from){
          //获取当前路由name
          var toName = to.name;
          var fromName = from.name;
          var currentName = this.$route.name;

      }
    
  },
  methods:{

    watchTest(){
      //测试 unwatch
      this.someObject.name = "456";
    }
     
  },
  components: {
      naviBar
  }
};

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#app{
  overflow:scroll;

.imgBack{
  width: 30px;
  height: 30px;
  position: absolute;
  left: 16px; 
  visibility: hidden;
}

.box_container{
  display: flex;
  flex-wrap: wrap ;
  flex-direction: row;
  overflow: hidden;
  border-top:1px solid #999999;
  //height: 80px;
  //background-color: red;
  .box_item_list{
      //border: 1px solid white;
      text-align: center;
      flex:0 0 50%;
      .box_item{
        padding-top: 10px;
        padding-bottom: 10px;
        img{
          width: 30px;
        }

      }
  }
  
}

main {
    position: absolute;
    margin-top: 0px;
    margin-bottom: 120px;
    background-color:white;
    text-align: center;
    width:100%;  
    overflow:clip;
    -webkit-overflow-scrolling: hidden;
     z-index: 8000;
}

footer {
    position: fixed;
    bottom:0px;
    margin: auto 0;
    background-color:white;
    clear:both;
    width:100%;
    z-index: 9000;
}



}

</style>
